<!--! Magic Searchbar -->
<div class="magic-search" magic-overrides>
  <div class="search-bar">
    <i class="fi-filter fa fa-search go"></i>
    <div class="search-main-area">
      <span class="item-list">
        <span class="label radius secondary item"
              ng-repeat="facet in currentSearch" ng-cloak="cloak" ng-class="{'server-side-item': facet.isServer}">
          <i data-toggle="tooltip" title="{$ ::strings.serverFacet $}"
             ng-class="{'fa fa-server': facet.isServer}"></i>
          <i data-toggle="tooltip" title="{$ ::strings.clientFacet $}"
             ng-class="{'fa fa-desktop': !facet.isServer}"></i>
          <span>
            {$ ::facet.label[0] $}: <b>{$ ::facet.label[1] $}</b>
          </span>
          <a class="remove" ng-click="removeFacet($index, $event)" title="{$ ::strings.remove $}">
            <i class="fi-x fa fa-times"></i>
          </a>
        </span>
      </span>
      <span class="search-selected label" ng-cloak="" ng-show="facetSelected">
        {$ facetSelected.label[0] $}:
      </span>
      <!-- For bootstrap, the dropdown attribute is moved from input up to div. -->
      <div class="search-entry" dropdown is-open="isMenuOpen">
        <input class="search-input" type="text" dropdown-toggle
               placeholder="{$ strings.prompt $}" autocomplete="off" />
        <ul id="facet-drop" class="f-dropdown dropdown-menu" data-dropdown-content="">
          <li ng-repeat="facet in filteredObj" ng-show="!facetSelected">
            <a ng-click="facetClicked($index, $event, facet.name)"
               ng-show="!isMatchLabel(facet.label)">{$ ::facet.label $}</a>
            <a ng-click="facetClicked($index, $event, facet.name)"
               ng-show="isMatchLabel(facet.label)">
               {$ ::facet.label[0] $}<span class="match">{$ ::facet.label[1] $}</span>{$ ::facet.label[2] $}
            </a>
          </li>
          <li ng-repeat="option in filteredOptions" ng-show="facetSelected">
            <a ng-click="optionClicked($index, $event, option.key)"
               ng-show="!isMatchLabel(option.label)">
               {$ option.label $}
            </a>
            <a ng-click="optionClicked($index, $event, option.key)"
               ng-show="isMatchLabel(option.label)">
               {$ ::option.label[0] $}<span class="match">{$ ::option.label[1] $}</span>{$ ::option.label[2] $}
            </a>
          </li>
        </ul>
      </div>
    </div>
    <a ng-click="clearSearch()" ng-show="currentSearch.length &gt; 0" title="{$ ::strings.cancel $}">
      <i class="fi-x fa fa-times cancel"></i>
    </a>
  </div>
</div>
